<!-- 个人中心 -->
<template>
  <view class="container">

    <view v-for="item in dataList">
      <view class="item">
        <view class="zuo">
          <image mode="widthFix" style="width: 176rpx;height: 240rpx;" :src="item.img_main"></image>
        </view>
        <view class="you">
          <view class="title">
            <view>{{item.title}}</view>
          </view>
          <!-- <view v-html="item.info" class="content"></view> -->
          <view class="xia">
            <view class="time">{{ item.createtime | timeFormat('yyyy-mm-dd') }}</view>
            <view class="xq" @click="goPage('pages/jewel/sharonDetail?data='+encodeURIComponent(JSON.stringify(item)))">查看详情></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dataList: []
    };

  },
  onLoad() {
    this.getData()
  },
  onShow() {

  },
  computed: {

  },
  methods: {
    getData() {
      this.$api.trainList({
        type: 4
      }).then(res => {
        if (res.code == 1) {
          this.dataList = res.data
          console.log('dataList', this.dataList)
        }
      });
    },
  },
}
</script>
<style>
page {
  height: 100% !important;
  min-height: 100% !important;
  /* background: #F5F5F5 !important; */
}
</style>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/deep/ .bjh-p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.container {
  padding: 0rpx 30rpx 30rpx 30rpx;
  // background: #F5F5F5;
  // height: 100vh;
}

.item {
  margin-top: 30rpx;
  height: 280rpx;
  border-bottom: 1px solid #eeeeee;
  display: flex;
}

.zuo {
  width: 30%;
}

.you {
  display: flex;
  flex-direction: column;
  width: 70%;
  justify-content: space-between;
  height: 240rpx;
}

.xia {
  display: flex;
  justify-content: space-between;
}

.title {
  font-size: 30rpx;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.content {
  font-size: 28rpx;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #999999;
  overflow: hidden; //超出隐藏
  text-overflow: ellipsis; //溢出用省略号...显示
  display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
  -webkit-box-orient: vertical; //从上到下垂直 排列子元素（设置伸缩盒子的子元素排列方式）
  -webkit-line-clamp: 3; //表示显示的行数合上面两个属性，表示显示的行数
}

.time {
  font-size: 24rpx;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #cccccc;
}

.xq {
  width: 148rpx;
  height: 40rpx;
  background: #f53939;
  border-radius: 6rpx 6rpx 6rpx 6rpx;
  color: #ffffff;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
